<template>
  <div id="cart_list">
    <scroll ref="scroll" class="content">
      <template>
        <cart-list-item
          v-for="(item, index) in cartList"
          :key="index"
          :item-info="item"
          ref="item"
          @click="click"
        ></cart-list-item>
      </template>
    </scroll>
  </div>
</template>

<script>
// mapGetters 工具函数会将 store 中的 getter（相当于state数据的计算属性，可以在组件中复用） 映射到局部计算属性中
import {mapGetters} from 'vuex'
import CartListItem from "@/views/cart/childComps/CartListItem";
import Scroll from "@/components/common/scroll/Scroll";
export default {
  name: "CartList",
  computed: {
    ...mapGetters(['cartList'])
  },
  components: {
    CartListItem,
    Scroll
  },
  activated() {
    // 及时对购物车的商品进行刷新，让其能滚动
    this.$refs.scroll.refresh()
  },
  methods: {
    click(){
      this.$router.push('/detail/' + this.$refs.item.iteminfo.iid)
    }
  }
}
</script>

<style scoped>
#cart_list {
  height: calc(100% - 44px - 49px - 40px);
}
/**
* scroll
*/
.content {
  height: calc(100% - 44px - 49px - 40px);
  overflow: hidden;
}
</style>
